<template>
  <div class="hospital-rank-container">
    <h3 class="rank-title">
      医院排行榜
    </h3>
    <ul  class="rank-box">
      <div
        v-for="(rankItem,index) in rankData"
        :key="index"
        class="rank-item">
        <router-link class="hospital-item-box" :to="{path: rankItem.link+'/'+rankItem.id}">
          <com-list-item ref="hospitalRankItem" :itemData="rankItem">
            <van-button
              disabled
              size="mini"
              type="info"
              class="rank-index">
              No.{{index+1}}
            </van-button>
          </com-list-item>
        </router-link>
        <!-- hospital-doctors -->
        <div class="hospital-doctors">
          <div v-for="(dt, index) in equivalentHospitalDoctors(rankItem.id)"
            :key='index'
            class="doctor-box"
            @click="checkDoctor(dt)">
            <img :src="dt.image" alt="医生头像">
            <div class="doctor-des">
              <p class="doctor-des-name">{{dt.name}}</p>
              <p class="doctor-des-duty">{{dt.duty}}</p>
            </div>
          </div>
        </div>
      </div>
    </ul>
  </div>
</template>

<script>
import comListItem from "../../../components/comListItem"

export default {
  components: {
    comListItem
  },
  props: {
    rankData: {
      type: Array,
      default: () => [
        {
          id: 1000,
          link: '/hospital',
          image: require('../../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599
        },
        {
          id: 1001,
          link: '/hospital',
          image: require('../../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599
        },
        {
          id: 1000,
          link: '/hospital',
          image: require('../../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599
        },
        {
          id: 1002,
          link: '/hospital',
          image: require('../../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599
        },
        {
          id: 1003,
          link: '/hospital',
          image: require('../../../assets/images/hospital-default.png'),
          name: '四川晶肤医学美容医院',
          tags: ['玻尿酸', '眼部整形', '抗衰老', '除皱瘦脸'],
          address: '四川市武侯区十二桥路39号',
          rate: 5,
          isAttestation: true,
          subscribe: 599
        }
      ]
    },
    hospitalMainDocter: {
      type: Array,
      default: () => [
        {
          hid: 1000,
          name: '四川晶肤医学美容医院',
          docters: [
            {
              did: 1,
              name: '董明珠',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },
            {
              did: 2,
              name: '马里',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },{
              did: 3,
              name: '杰西',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },
            {
              did: 4,
              name: '董明珠',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },
            {
              did: 5,
              name: '马里',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },{
              did: 6,
              name: '杰西',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            }
          ]
        },
        {
          hid: 1001,
          name: '四川晶肤医学美容医院1',
          docters: [
            {
              did: 1,
              name: '董明珠',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },
            {
              did: 2,
              name: '马里',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },{
              did: 3,
              name: '杰西',
              duty: '主治医师',
              image: require('../../../assets/images/doctor-icon-default.png')
            },
          ]
        }
      ]
    }
  },
  computed: {
  },
  methods: {
    attestationIcon(rankItem) {
      let iconPath
      if (rankItem && rankItem.isAttestation === true) {
        iconPath = require('../../../assets/images/auth.png')
      }
      return iconPath
    },
    equivalentHospitalDoctors (hid) {
      // 找到医院旗下的医生团队数据
      // 2个Array,一顿操作后 会产生一个 对象出来
      let docters = []
      try {
        const res = this.hospitalMainDocter.filter(item=>{
          if (item.hid === hid) {
            return item
          }
        })
        docters = res[0].docters
      } catch (error) {}
      return docters
    },
    checkDoctor(doctor) {
      if (!doctor) { return }
      // 查看医生信息
      this.$toast(`查看：${doctor.name} 医生详情`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/style/global.scss";

.hospital-rank-container {
  width: 100%;
  position: relative;
  margin-top: 12px;
  .rank-title {
    position: relative;
    width: 100%;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 600;
    padding-left: 30px;
    box-sizing: border-box;
  }
  .rank-title::after {
    content: '';
    background: #46d7dc;
    display: inline-block;   
    width: 4px;
    height: 20px;
    border-radius: 6px;
    position: absolute;
    left: 16px;
    top: 12px;
  }
  .rank-box {
    width: 100%;
    .rank-item {
      width: 100%;
      margin: 0 auto;
      margin-bottom: 10px !important;
      position: relative;
      box-sizing: border-box;
      .hospital-item-box {
        width: 100%;
        box-sizing: border-box;
      }
      .hospital-doctors {
        width: calc(100% - 24px);
        margin: 0 auto;
        display: -webkit-box;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
        box-shadow: 0 5px 5px -5px  rgba(175, 175, 175, 0.5);
        box-sizing: border-box;
        padding-top: 10px;
        .doctor-box {
          white-space: nowrap;
          font-size: 12px !important;
          @include flex(row);
          padding-right: 36px;
          box-sizing: border-box;
          img {
            width: 72%;
          }
          .doctor-des {
            @include flex(column);
            justify-content: center;
            align-items: flex-start;
            margin: 0 2px;
            .doctor-des-name {
              font-weight: 600;
              color: #000;
              @include ellipsis;
            }
            .doctor-des-duty {
              margin-top: 2px;
              font-size: 10px !important;
              color: #999;
              @include ellipsis;
            }
          }
        }
      }
    }
    .rank-index {
      position: absolute;
      left: 6px;
      top: 72px;
      z-index: 99;
      border: none;
      border-radius: 4px;
      background: $colorRankTag;
    }
    .rank-item:nth-child(1) {
      .rank-index {
        background: $colorRankTag1 !important;
      }
    }
    .rank-item:nth-child(2) {
      .rank-index {
        background: $colorRankTag2 !important;
      }
    }
    .rank-item:nth-child(3) {
      .rank-index {
        background: $colorRankTag3 !important;
      }
    }
  }
}
</style>
